<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app{
            padding: 20px;
        }
        .page{
            height: 400px;
            line-height: 400px;
            box-shadow: 0 0 12px #ccc;
            font-size: 40px;
            text-align: center;
        }
    </style>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="页面1" @click=" page='PageA' ">
        <input type="button" value="页面2" @click=" page='PageB' ">
        <input type="button" value="页面3" @click=" page='PageC' ">
        <input type="button" value="页面4" @click=" page='PageD' ">

        <hr>

        <!-- 
            组件缓存技术：通过缓存vue组件实例对象，减少程序在运行过程中对一个组件的反复创建和销毁的操作
                vue 通过内置的自定义 包裹形组件 keep-alive 完成 动态组件或者 v-if 的组件操作的 缓存功能
        -->
        <!-- <page-a v-if="page=='PageA'"></page-a>
        <page-b v-if="page=='PageB'"></page-b>
        <page-c v-if="page=='PageC'"></page-c>
        <page-d v-if="page=='PageD'"></page-d> -->

        <!-- <page-a v-show="page=='PageA'"></page-a>
        <page-b v-show="page=='PageB'"></page-b>
        <page-c v-show="page=='PageC'"></page-c>
        <page-d v-show="page=='PageD'"></page-d> -->
        
        <!-- <keep-alive>
            <page-a v-if="page=='PageA'"></page-a>
            <page-b v-if="page=='PageB'"></page-b>
            <page-c v-if="page=='PageC'"></page-c>
            <page-d v-if="page=='PageD'"></page-d>
        </keep-alive> -->
        
        <!-- 
            include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
            exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 
            max - 设置缓存上限
        -->
        <!-- 
        <keep-alive exclude="PageA,PageB">
            <component :is='page'></component>
        </keep-alive>
        -->

        <!-- <keep-alive max="2">
            <component :is='page'></component>
        </keep-alive> -->

        <keep-alive>
            <!-- 动态组件在组件切换时，使用的是创建删除规则 -->
            <!-- <component :is='page'></component> -->
            <component :is='page'></component>
        </keep-alive>

        <hr>
    </div>

    <script>

        Vue.component("PageA", {
            template:`
                <div class="page">
                    页面1:{{ num }}
                </div>
            `,
            data() {
                return {
                    num:0
                }
            },
            beforeCreate() {
                console.log("PageA组件被创建")
            },
            created() {
                console.log("页面初始化数据加载"+Math.floor( Math.random()*100000 ))
            },
            activated() {
                console.log("PageA组件被显示-激活")
                this.$timer = setInterval(() => {
                    this.num = this.num+1
                }, 500);
            },
            deactivated() {
                console.log("PageA组件被隐藏-去激活")
                clearInterval(this.$timer)
            },
            destroyed() {
                console.log("PageA组件被销毁")
            },
        })
        Vue.component("PageB", {
            template:`
                <div class="page">
                    页面2
                </div>
            `,
            beforeCreate() {
                console.log("PageB组件被创建")
            },
            destroyed() {
                console.log("PageB组件被销毁")
            },
        })
        Vue.component("PageC", {
            template:`
                <div class="page">
                    页面3
                </div>
            `,
            beforeCreate() {
                console.log("PageC组件被创建")
            },
            destroyed() {
                console.log("PageC组件被销毁")
            },
        })
        Vue.component("PageD", {
            template:`
                <div class="page">
                    页面4
                </div>
            `,
            beforeCreate() {
                console.log("PageD组件被创建")
            },
            destroyed() {
                console.log("PageD组件被销毁")
            },
        })

        new Vue({
            el:"#app",
            data:{
                page:"PageA"
            }
            
        })
    </script>
</body>
</html>